<!DOCTYPE html>

<html>

<head>
    <title>Клубы на карте</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">
ymaps.ready(init);

var myMap;

function init () {
	myMap = new ymaps.Map("map", {
		center: [59.95,30.3], // СПб
		zoom: 12,
		behaviors: ['default', 'scrollZoom']
	});

	var clusterer = new ymaps.Clusterer({
		preset: 'twirl#invertedBlueClusterIcons',
		groupByCoordinates: false,
		clusterDisableClickZoom: true
	});

	var points = [ [59.9, 30.3], [59.9, 30.2]];

	var geoObjects = [];

	for(var i = 0, len = points.length; i < len; i++) {
		geoObjects[i] = new ymaps.Placemark(points[i],  {
			iconContent: i,
			balloonContent: 'balloon ' + i,
			hintContent: 'tooltip ' + i,
			clusterCaption: 'point ' + i
		}, {
			preset: 'twirl#blueIcon'
		});
	}

	clusterer.add(geoObjects);

	clusterer.events
		// Можно слушать сразу несколько событий, указывая их имена в массиве.
		.add(['mouseenter', 'mouseleave'], function (e) {
			var target = e.get('target'), // Геообъект - источник события.
				eType = e.get('type'), // Тип события.
				zIndex = Number(eType === 'mouseenter') * 1000; // 1000 или 0 в зависимости от типа события.

			target.options.set('zIndex', zIndex);
		});

	myMap.geoObjects.add(clusterer);
}

function changeCity(obj){
    if(obj.value == 0) myMap.setCenter([59.9,30],10);
    else myMap.setCenter([55.5,37],10);
}
</script>
</head>

<body>
    <div id="map" style="width:400px; height:300px"></div>
    <select onchange="changeCity(this);">
        <option value="0">Санкт-Петербург</option>
        <option value="1">Москва</option>
    </select>
</body>

</html>
